// 背景起始颜色
@startbgc: rgba(78, 79, 83, .8);
// 背景结束颜色
@endbgc: rgba(128, 129, 133, .8);
// 普通背景颜色
@inbgc: rgba(78, 79, 83, .8);

// 细科技边框
.smallborder {
  border: 1px solid #f2f6fc;
  border-top: none;
  border-bottom: none;
}

// 粗科技边框
.blurborder {
  border: 2px solid #f2f6fc;
  border-top: none;
  border-bottom: none;
}

.home-right {
  position: relative;
  display: flex;
  height: 100%;
  width: 100%;

  // 地图操作台
  .right-child-left {
    width: 710px;
    height: 100%;
    position: relative;

    // 大地图
    .home-main-right-map {
      width: 710px;
      height: 560px;
      position: relative;
      overflow: hidden;

      img {
        width: 100%;
        height: 100%;

      }

      // 船体位置
      .right-allmap-location {
        display: flex;
        position: absolute;
        top: calc(50% - 40px);
        left: calc(50% - 10px);

        img {
          height: 80px;
          width: 20px;
        }
      }

      // 警告显示
      .right-allmap-warning {
        position: absolute;
        top: 300px;

        img {
          width: 40px;
          height: 40px;
        }
      }

      // 经纬
      .right-jinwei {
        margin: 5px 0 0 5px;
        // width: 180px;
        padding: 10px;
        box-sizing: border-box;
        color: #fff;
        background: rgba(150, 150, 150, 0.8);
        text-align: left;
        border-radius: 4px;
        position: absolute;
        top: 0;

        // 本船位置
        // .jinwei-localtion {
        //   margin-bottom: 5px;
        // }
        // 方向设置
        .jinwei-fx {
          .jinwei-fx-infor {
            display: flex;

            div {
              width: 50%;
            }
          }
        }

        //内部h6 p的样式统一设置
        h6 {
          margin-bottom: 6px;
        }

        p {
          font-size: 14px;
          line-height: 18px;
        }
      }

      // 雷达信息
      .right-allmap-radar {
        position: absolute;
        right: 0;
        top: 0;
        background: #30313355;
        text-align: left;
        width: 150px;
        border-radius: 4px;
        font-size: 14px;
        color: #fff;
        margin: 5px 5px 0 0;

        h4 {
          background: #2222;
          line-height: 30px;
        }

        ul {
          li {
            padding: 0 5px;
            display: flex;
            line-height: 38px;

            span.right-rader-zy {
              margin-right: 5px;
            }

            /deep/.el-slider {
              width: 50%;
              margin: auto 5px;
            }

            /deep/.el-slider__bar {
              background-color: #3338;
            }

            /deep/.el-slider__button {
              border: 2px solid #333;
              width: 4px;
              border-radius: 4px;
              height: 12px;
            }
          }
        }
      }

      // 航速设置
      .right-current-site {
        position: absolute;
        right: 0;
        bottom: 0;
        width: 100px;
        margin: 0 5px 5px 0;
        height: 100px;
        border-radius: 50%;
        background: #F56C6C55;

        p {
          width: 100%;
          margin-top: 28px;
          color: #fff;
        }
      }

      // 当前站点
      .right-current-sites {
        position: absolute;
        right: 0;
        top: 0;
        margin: 5px 5px 0 0;
        text-align: left;
        padding: 10px;
        background: #30313355;
        border-radius: 4px;
        color: #fff;

        p {
          font-size: 14px;
          line-height: 20px;

          span {
            font-size: 15px;
            color: #fff;
          }
        }
      }

      // 货物信息
      .right-current-cargo{
        position: absolute;bottom:0;left:0;margin:5px;
        background: #30313355;
        width:126px;padding:10px;border-radius: 4px;text-align:left;color:#fff;
        h5{
          font-size:14px;
        }
        span{
          text-align:right;color:#F56C6C;
        }
        p{
          text-align:right;
        }
      }
    }

    // 操作台
    .right-workStation {
      width: 100%;
      height: calc(100% - 560px);
      display: flex;
      text-align: left;
      // background: -webkit-radial-gradient(center,  @startbgc , @endbgc );
      background: @inbgc;
      border-radius: 6px;
      color: #fff;
      box-sizing: border-box;
      // box-shadow: 0 1px 8px 3px #fff5 inset;
      z-index: 1000;

      // 油量汽油显示
      .rigth-workSta-gasolines {
        width: calc((100% - 260px) / 2);
        box-sizing: border-box;
        padding: 5px;

        .rigth-workSta-gasolines-transverse {
          margin-bottom: 20px;
          margin-top: 20px;

          h6 {
            margin-bottom: 5px;
          }
        }

        // 电量油量显示
        .rigth-workSta-gasolines-gasoline {
          display: flex;
          margin-top: 15px;

          // 油量
          .rightChild-gasoline {
            width: 45%;
            position: relative;
            margin: 0 auto;

            /deep/.el-progress .el-progress--dashboard {
              margin: 0 auto;
              text-align: center;

              svg {
                margin: 0 auto;
              }
            }

            /deep/.el-progress__text {
              color: #fff;
            }

            h6 {
              margin-top: -20px;
              padding: 0 23px;
            }
          }

          // 新风格电量
          .rightChild-gasolines {
            width: 45%;
            position: relative;
            margin: 0 20px 0 10px;

            div.rightChild-gasolines-xin {
              border: 1px solid #fff;
              height: 8px;
              margin-bottom: 5px;
              transform: skew(-40deg);
              box-sizing: border-box;
              overflow: hidden;

              div {
                background: #67C23A;
                width: 100%;
                height: 100%;
              }
            }

            .rightChild-gasolines-number {
              position: absolute;
              right: 0;
              top: 50%;
              font-size: 20px;
              font-style: italic;

              p {
                font-size: 14px;
              }
            }
          }

        }


      }

      // 信息显示
      .right-works-infor {
        width: 260px;
        padding:0 5px;

        .right-infor-sucss {
          border-radius: 10%;
          height:100%;
          .smallborder;
          box-shadow: 0 5px 5px 6px #3333;

          li {
            p {
              height: 50px;
              line-height: 50px;
              padding-left: 25px;

              span {
                color: #fff;
                font-size: 14px;
                font-weight: 600;
              }
            }
          }
        }
      }

      // 仪表盘
      .dashboard {
        flex-grow: 1;
        padding: 5px;
        text-align: center;
        // background:rgba(240,240,240,.7);


        img {
          width: 170px;
          margin-top: 10px;
          filter: brightness(250%);
        }

        p.right-dash-speed {
          margin-top: -25px;
          font-size: 18px;

          span {
            color: #67c23a;
          }
        }

        .right-dash-moterspeed {
          display: flex;
          text-align: left;
          margin-top: 10px;

          div {
            width: 50%;
            box-sizing: border-box;
            padding: 0 5px;

            h6 {
              font-style: italic;
              margin-bottom: 3px;
            }

            p {
              background: #fff3;
              line-height: 20px;
            }
          }
        }
      }
    }
  }

  // 右边操作信息显示
  .rigth-operation-infor {
    height: 100%;
    flex-grow: 1;
    position: relative;

    // 视频显示
    .right-video {
      height: 250px;
      border: 2px solid #555;
      box-sizing: border-box;
      width: 100%;
      position: relative;

      img {
        width: 100%;
        height: 100%;
      }

      // 时间显示
      p {
        position: absolute;
        top: 0;
      }

      // 视频操作
      .right-video-operation {
        position: absolute;
        left: 0;
        bottom: 0;

        ul {
          li {
            box-sizing: border-box;
            padding: 5px;
            cursor: pointer;

            img {
              width: 40px;
              filter: brightness(250%);
            }
          }
        }
      }
    }

    // 信息与小地图与雷达
    .right-operation-infor-mapandinfor {
      width: 100%;
      height: 260px;
      display: flex;
      // background: -webkit-radial-gradient(center, circle, @startbgc 5px, @endbgc );
      background: #707277;
      color: #fff;
      border-radius: 8px;
    }

    // 地图雷达
    .right-operation-infor-map {
      width: 150px;

      // 小地图
      .right-map {
        width: 100%;
        height: 150px;
        box-sizing: border-box;
        border-radius: 50%;
        // box-shadow: 0px 0px 5px 2px rgba(100, 100, 100, 0.5);
        overflow: hidden;
        margin: 10px 0;
        position: relative;

        .right-samllmap-localtion {
          position: absolute;
          top: calc(50% - 8px);
          left: calc(50% - 8px);
          color: #333;
        }

        img {
          width: 100%;
          height: 100%;
        }
      }

      // 雷达
      .right-radar {
        margin: 10px 0;
        border-right: none;
        border-left: none;
        padding: 0 8px;

        .right-rader-pgroup {
          width: 100%;
          .blurborder;
          border-radius: 10%;
          padding: 5px 0;
        background:#fff2;

        }

        p {
          padding: 0 10px;
          font-size: 12px;

          span {
            color: #ff6700;
            font-size: 14px;
          }

          i {
            color: #f56c6c;
          }
        }
      }
    }

    // 信息显示1
    .right-user-infomation-one {
      height: 260px;
      box-sizing: border-box;
      top: 250px;
      border-radius: 6px;
      overflow: hidden;
      flex-grow: 1;

      // s速度
      .user-one-speed {
        display: flex;

        div {
          width: 50%;
          box-sizing: border-box;
          border-bottom: 1px solid #fff;
          border-top: 1px solid #fff;

          border-radius: 4px;
        }

        .user-speed-state {
          line-height: 70px;
          border-left: 1px solid #fff;
          color: #e6a23c;
          font-weight: 600;
          box-sizing: border-box;
        }

        .user-speed-speed {
          line-height: 25px;
          border-left: 1px solid #fff;
          border-right: 1px solid #fff;

          span {
            color: #67c23a;
          }

          .user-speed-speed-p-one {
            font-size: 18px;
            line-height: 28px;
            margin-top: 7px;

            span {
              color: #67c23a;
            }
          }

          .user-speed-speed-p {
            font-size: 12px;

            span {
              color: #f56c6c;
            }
          }
        }
      }

      // 乘客信息
      .user-one-information {
        text-align: left;

        p {
          line-height: 47px;
          // border-bottom: 1px solid #ccc;
          // background: rgba(255,255,255,.4);
          padding-left: 20px;
          border-radius: 4px;
        }

        p:last-child {
          border: none;
        }

        p:nth-child(2n) {
          background: rgba(255, 255, 255, .2);
        }

        p>span {
          padding: 0 10px;
          font-weight: 600;
        }
      }
    }

    // 信息显示
    .right-user-infomation {
      position: absolute;
      right: 0;
      bottom: 0;
      width: 100%;
      height: 260px;
      background: #707277;
      border-radius: 4px;
      display: flex;
      color: #d9ecff;

      // 人工越权
      .right-user-infomation-left {
        width: 60%;

        div.right-user-infomation-left-auto {
          height: 56%;
          border-bottom: 1px solid #d9ecff55;

          // 控制模式
          .right-user-child-model {
            display: flex;
            padding: 5px;
            box-sizing: border-box;
            background: #666;
            border-radius: 6px;

            div {
              width: 100%;
              padding: 5px;
              box-sizing: border-box;
              border-right: 1px solid #fff;


              h6 {
                text-align: left;
                font-size: 15px;
                padding: 0 30px;
              }

              p {
                text-align: right;
                color: #eee;
                padding: 0 30px;
                line-height: 42px;

              }

              p.model-color {
                color: #f56c6c;
              }
            }

            div:last-child {
              border: none;
            }
          }

          // 紧急报警
          .right-user-child-stop {
            height: 58%;
            display: flex;
            box-sizing: border-box;
            justify-content: space-around;

            div.right-user-child-stop-sos {
              width: 50%;
              // background:#40424488;
            }

            button {
              border: none;
              outline: none;
              height: 50px;
              width: 50px;
              border-radius: 50%;
              border: 2px solid #f56c6c;
              font-weight: 600;
              color: #f56c6c;
              margin-top: 5px;
            }

            p {
              font-size: 14px;
              margin-top: 2px;
              color: #f56c6c;
            }
          }
        }

        // 权限申请
        .right-user-infomation-left-unauto {

          ul {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-around;

            li {
              width: 50%;
              // height: 40%;
              box-sizing: border-box;
              padding: 3px;
              // background:#40424488;
              margin-bottom: 2px;

              img {
                width: 23%;
                filter: brightness(250%);
              }

              p {
                font-size: 14px;
              }
            }
          }
        }
      }

      // 右边信息操作
      .right-user-infomation-right {
        width: 40%;

        ul {
          display: flex;
          flex-wrap: wrap;
          justify-content: space-between;
          align-items: flex-end;
          height: 50%;

          li {
            width: 50%;
            margin-bottom: 2px;
            box-sizing: border-box;
            padding: 10px 5px;

            // background:#40424488;
            // border-radius: 4px;
            img {
              width: 35%;
              filter: brightness(250%);
            }

            p {
              font-size: 12px;
            }
          }
        }

        // 紧急停船
        .right-user-infomation-stop {
          height: 50%;

          button {
            border: none;
            outline: none;
            height: 70px;
            width: 70px;
            border-radius: 50%;
            border: 2px solid #E6A23C;
            font-weight: 600;
            color: #E6A23C;
            margin-top: 15px;
          }

          p {
            font-size: 18px;
            margin-top: 2px;
            color: #E6A23C;
          }
        }
      }
    }
  }
}